<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
				list-style: none;
			}
			
			.clearfix:after,
			.clearfix:before {
				content: '';
				display: table;
			}
			
			.clearfix:after {
				clear: both;
			}
			
			.y_head {
				width: 100%;
				background-color: #EFEFEF;
			}
			
			.y_header {
				width: 1100px;
				margin: auto;
				padding: 10px 0 10px;
			}
			
			.y_cont_logo {
				width: 200px;
				height: 70px;
				float: left;
				margin-left: 20px;
			}
			
			.y_cont_logo img {
				width: 200px;
				height: 70px;
			}
			
			.y_login_user {
				float: right;
				position: relative;
			}
			
			.y_login_user {
				width: 100px;
			}
			
			.y_login_user img {
				width: 50px;
				height: 50px;
				border-radius: 50%;
				padding: 10px;
				display: block;
				margin: auto;
			}
			
			.y_user_detail {
				display: none;
			}
			
			.y_user_detail {
				width: 200px;
				background: #FFF;
				border: solid 1px #CCCCCC;
				position: absolute;
				left: -40px;
				top: 70px;
				z-index: 1;
			}
			.y_user_detail p,
			.y_user_detail li {
				font-size: 16px;
				line-height: 46px;
				text-align: center;
			}
			.y_user_detail p a,
			.y_user_detail li a {
				text-decoration: none;
				color: #000;
			}
			
			.y_collect {
				width: 1100px;
				margin: auto;
			}
			
			.y_book_tit h3 {
				font-size: 32px;
				line-height: 80px;
			}
			
			.y_book_text {
				width: 190px;
				float: left;
				margin: 0 10px;
				position: relative;
			}
			
			.y_book_text img {
				width: 190px;
				height: 250px;
			}
			
			.y_book_txt p:nth-child(1) {
				font-size: 20px;
				line-height: 40px;
			}
			
			.y_book_txt p:nth-child(2) {
				font-size: 16px;
				line-height: 30px;
				padding-left: 10px;
			}
			
			.y_book_text span {
				width: 25px;
				height: 25px;
				line-height: 25px;
				border-radius: 50%;
				background: #ce2f2b;
				color: #FFF;
				position: absolute;
				right: -10px;
				top: -10px;
				text-align: center;
				font-size: 20px;
				display: none;
			}
			
			.y_login_bottom {
				width: 100%;
				padding-bottom: 30px;
				padding-top: 80px;
			}
			
			.y_login_bottom p {
				font-size: 16px;
				line-height: 50px;
				text-align: center;
			}
			
			.y_collect_tit {
				font-size: 26px;
				line-height: 100px;
			}
		</style>
	</head>

	<body>
		<div class="box">
			<div class="y_head">
				<div class="y_header clearfix">
					<div class="y_cont_logo">
						<img src="images/2.png" />
					</div>
					<div class="y_login_user">
						<img src="images/1.png" />
						<ul class="y_user_detail">
							<p>
								<a href="">立即登录</a>
							</p>
							<li>
								用户名
							</li>
							<li>
								<a href="">我的书架</a>
							</li>
							<li>
								<a href="">我的收藏</a>
							</li>
							<li>
								<a href="">个人中心</a>
							</li>
							<li>
								<a href="">退出登录</a>
							</li>
						</ul>
					</div>
				</div>
			</div>
			<div class="y_collect">
				<div class="y_collect_tit">
					<h3>我的收藏</h3>
				</div>
				<div class="y_book_cont clearfix">
					<!--<div class="y_book_text">
						<span>×</span>
						<div class="y_book_img">
							<img src="" />
						</div>
						<div class="y_book_txt">
							<p>《但是奇偶发》</p>
							<p>作者</p>
						</div>
					</div>
					<div class="y_book_text">
						<span>×</span>
						<div class="y_book_img">
							<img src="" />
						</div>
						<div class="y_book_txt">
							<p>《但是奇偶发》</p>
							<p>作者</p>
						</div>
					</div>
					<div class="y_book_text">
						<span>×</span>
						<div class="y_book_img">
							<img src="" />
						</div>
						<div class="y_book_txt">
							<p>《但是奇偶发》</p>
							<p>作者</p>
						</div>
					</div>-->
				</div>
			</div>
			<div class="y_login_bottom">
				<p>清朗网文　|　关于逐浪　|　作者投稿　|　用户指南　|　服务条款　|　版权声明　|　网站地图　|　招聘信息　|　联系我们</p>
				<p>Copyright © 2019 zhulang.com, All Rights Reserved. 南京大众书网图书文化有限公司版权所有 未经书面许可不得复制转载。</p>
				<p>增值电信业务经营许可证苏B2-20130019 苏ICP备12028084号 苏网文[2016]5224-123号 新出网证（苏）字0027号　</p>
			</div>
		</div>
		<script type="text/javascript" src="jquery.js"></script>
		<script type="text/javascript">
			//判断有没有登录
		if(!localStorage.user) {
			$('.y_user_detail p').css({
				display: 'block'
			})
			$('.y_user_detail li').css({
				display: 'none'
			})
		} else {
			$('.y_user_detail p').css({
				display: 'none'
			})
			$('.y_user_detail li').css({
				display: 'block'
			})
			$('.y_login_user img').attr('src', localStorage.img)
			$('.y_login_user li').eq(0).html(localStorage.name)
		}
			//登陆注册
			$('.y_login_user').on('mouseover', function() {
				$('.y_user_detail').show()
			})
			$('.y_login_user').on('mouseout', function() {
				$('.y_user_detail').hide()
			})
			//顶部头像显示
			$('.y_login_user img').attr('src', localStorage.img)
			$('.y_login_user li').eq(0).html(localStorage.name)
			//我的书架
			$('.y_login_user li').eq(1).on('click', function() {
				$(this).children().attr('href', href + '/books.html')
			})
			//退出登录
			$('.y_login_user li').eq(4).on('click', function() {
				$('.y_login_user li').eq(0).html('用户名:')
				$('.y_login_user img').attr('src', 'images/1.png')
				localStorage.clear('user')
				localStorage.clear('uid')
				localStorage.clear('img')
				localStorage.clear('name')
				$(this).children('a').attr('href', href)
			})
			//个人收藏
			$('.y_login_user li').eq(2).on('click', function() {
				$(this).children().attr('href', href + '/collect.html')
			})
			//个人中心
			$('.y_login_user li').eq(3).on('click', function() {
				$(this).children('a').attr('href', href + '/detials.html')
			})
			var href='http://localhost:8000'
			//获取我收藏的小说
			$.ajax({
				type: "post",
				url: href + "/users/sc",
				data: {
					loginuid:localStorage.uid
				},
				success(data) {
					console.log(data)
					data.forEach(function(o,i){
						var oDiv=$('<div class="y_book_text">').attr('data-suid',data[i].searchuid).append($('<a>').append($('<span>×</span>')).append($('<div class="y_book_img">').append($('<img>').attr('src',data[i].searchimg))
					).append($('<div class="y_book_txt">').append($('<p>').html('《'+data[i].searchname+'》')))
						)
						$('.y_book_cont').append(oDiv)
					})
					
				}
			});
			$('.y_book_cont').on('click','.y_book_text',function(){
				$(this).children('a').attr('href',href+'/fiction.html?suid='+$(this).attr('data-suid'))
			})
		</script>
	</body>

</html>